<script setup>
import System from '@/utils/system';
import { onLoad } from '@dcloudio/uni-app';
import { appStore } from '@/sotre/modules/app';
import { permissionApp } from '@/utils/permission';

const { userInfo, appInfo } = toRefs(appStore());

const $post = inject('$post');

const title = ref('');
const history = ref(uni.getStorageSync('searchHistory') || []);
const list = ref([]);
const type = ref(0);
const loading = ref(false);
const focus = ref(false);

onLoad(options => {
    type.value = options.type;
});

function search() {
    if (title.value) {
        const old = history.value.find(i => i === title.value);
        if (old) {
            history.value.splice(history.value.indexOf(old), 1);
        }
        history.value.unshift(title.value);
        uni.setStorageSync('searchHistory', history.value);
        const req = {
            appid: null,
            title: title.value,
            person: false,
            typeChild: '',
        };
        loading.value = true;
        if (type.value == 0) {
            $post('/mall/getApp', req).then(res => {
                if (res.data.length > 0) {
                    list.value = res.data.flatMap(i => i.data);
                } else {
                    list.value = [];
                }
                loading.value = false;
            });
        } else {
            req.person = true;
            req.appid = type.value;
            $post('/platform/enterpriseApps/getMyEnterprisApp', req).then(res => {
                list.value = res.data.flatMap(i => i.data);
                loading.value = false;
            });
        }
    }
    focus.value = false;
}

function remove(index) {
    history.value.splice(index, 1);
    uni.setStorageSync('searchHistory', history.value);
}

function back() {
    uni.navigateBack();
}

async function goChat(app) {
    if (await permissionApp(app)) {
        toChat(app);
    }
}

function toChat(app) {
    appInfo.value = app;
    uni.navigateTo({
        url: '/pages/chat/chat',
    });
}
</script>

<template>
    <div class="search">
        <u-navbar title="搜索" autoBack placeholder></u-navbar>
        <div
            class="search-box"
            :style="{ top: System.customBarHeight + 'px' }"
            @click="focus = true"
        >
            <wd-search
                v-model="title"
                @search="search"
                @cancel="back"
                @clear="list = []"
                @focus="focus = true"
                @blur="search"
                :maxlength="30"
                placeholder-left
            />
        </div>
        <div class="history" v-if="list.length === 0 && title.length === 0">
            <div
                class="item"
                v-for="(item, index) in history"
                :key="item"
                @click="(title = item), search()"
            >
                <wd-icon name="clock" size="20px" color="#999"></wd-icon>
                <span>{{ item }}</span>
                <div class="remove" @click.stop="remove(index)">
                    <wd-icon name="close" size="16px" color="#999"></wd-icon>
                </div>
            </div>
        </div>
        <div class="list" v-else-if="list.length > 0">
            <div class="item" v-for="item in list" :key="item.id" @click="goChat(item)">
                <wd-img :src="item.icon" width="50px" height="50px" round>
                    <template #error>
                        <image
                            src="/static/image/fox.png"
                            style="width: 50px"
                            mode="widthFix"
                        ></image>
                    </template>
                </wd-img>
                <div class="info">
                    <div class="title">{{ item.title }}</div>
                    <div class="desc">{{ item.description || item.title }}</div>
                </div>
                <div class="add">
                    <wd-icon name="add" size="16px"></wd-icon>
                </div>
            </div>
        </div>
        <div class="empty" v-else-if="title.length > 0 && !focus">
            <u-loading-icon v-if="loading" text="搜索中" textSize="18"></u-loading-icon>
            <u-empty v-else mode="search" text="暂无搜索结果"></u-empty>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.search {
    padding-top: 50px;
    .history {
        padding: 10px 20px;
        display: flex;
        flex-direction: column;
        .item {
            padding: 10px 0;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
            gap: 10px;
            .remove {
                margin-left: auto;
            }
        }
    }
    .empty {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70vh;
    }
    .search-box {
        position: fixed;
        width: 100%;
        left: 0;
        background: #fff;
        z-index: 999;
    }
    .list {
        padding: 0 12px;
        display: flex;
        flex-direction: column;
        :deep(.item) {
            display: flex;
            align-items: center;
            padding: 12px 0;
            gap: 12px;
            .wd-img {
                border: 1px solid #cfcfcf;
                padding: 5px;
            }
            .info {
                flex: 1;
                height: 60px;
                .title {
                    font-size: 16px;
                    font-weight: bold;
                    margin-bottom: 10px;
                }
                .desc {
                    font-size: 12px;
                    color: #666;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
            .add {
                width: 25px;
                height: 25px;
                background: #ffa968;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
            }
        }
    }
}
</style>
